<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>搜索职位</title>
    <link rel="stylesheet" href="../css/style.css" type="text/css"/>
    <link rel="stylesheet" href="../css/eui.css">
    <style>
        .el-select .el-input {
            width: 130px;
        }

        .input-with-select .el-input-group__prepend {
            background-color: white;
        }
    </style>
</head>
<body>
<div class="topbg">
    <p class="top gWidth">
        <a href="#">手机站</a> 丨 <a href="#">微信</a>
        <a href="zc.html" class="dl">登录/注册</a> 丨 <a href="grb.html">个人版</a> 丨 <a href="qyb.html">企业版</a>
    </p>
</div>
<div class="logo gWidth">
    <img src="../img/logo.png">
    <ul class="fl">
        <li><a href="/">首页</a></li>
        <li><a href="zpxx.html">招聘信息</a></li>
        <li><a href="jlzx.html">简历中心</a></li>
        <li><a href="zpzs.html">作品展示</a></li>
    </ul>
</div>


<div id="app">
    <template>
        <el-table
                :data="jobArr.filter(data => !search || data.job.toLowerCase().includes(search.toLowerCase())
                  || data.annual_salary.toLowerCase().includes(search.toLowerCase())
|| data.name.toLowerCase().includes(search.toLowerCase())
|| data.location.toLowerCase().includes(search.toLowerCase())
|| data.education.toLowerCase().includes(search.toLowerCase())
                )"
                style="width: 75% ;margin: 0 auto">
            <el-table-column
                    label="职位"
                    prop="job">
            </el-table-column>
            <el-table-column
                    label="年薪"
                    prop="annual_salary">
            </el-table-column>
            <el-table-column
                    label="所属公司"
                    prop="name">
            </el-table-column>
            <el-table-column
                    label="工作地点"
                    prop="location">
            </el-table-column>
            <el-table-column
                    label="最低学历"
                    prop="education">
            </el-table-column>
            <el-table-column
                    align="right">
                <template slot="header" slot-scope="scope">
                    <el-input
                            v-model="search"
                            size="mini"
                            placeholder="输入关键字搜索"/>
                </template>
                <template slot-scope="scope" >
                    <a :href="'../com/comJobDetail.html?id='+scope.row.id"
                       style="font-size:20px;color:white; text-decoration:none"><el-button
                            size="mini"
                            type="danger"
                    >查看详情</el-button></a>
                </template>
            </el-table-column>
        </el-table>
    </template>
</div>


<script src="../js/vue.js"></script>
<script src="../js/eui.js"></script>
<script src="../js/axios.min.js"></script>
<script>
    let v = new Vue({
        el: "#app",
        data: function () {
            return {
                input: '',
                select: '',
                jobArr: [
                    {
                        job:'',
                        name: '', annual_salary: '', education: '', location: ''

                    }
                ],
                search: '',
            }
        },
        created() {
            this.selectjob();
        },
        methods: {
            selectjob() {
                axios.post("/selectAllJob").then(function (response) {
                    v.jobArr = response.data;
                })
            }
        }
    })
</script>
</body>
</html>